<!DOCTYPE html>
<html>
<head>
    <title>电子书商城</title>
</head>
<body class="bgf6">

<style>
    .explain_box {
        padding: 8px 0 0 5px;
        border-top: 1px dashed #dbdbdb;
    }
</style>

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt">

            <div class="body-right" id="app">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <el-table
                                ref="multipleTable"
                                :data="carts"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="commoditySelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    label="商品"
                                    width="256">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="12"><div class="grid-content">
                                            <img :src="scope.row.picUrl" style="width: 80px;height: 80px">
                                        </div></el-col>
                                        <el-col :span="12"><div class="grid-content">
                                            {{scope.row.commoName}}
                                        </div></el-col>
                                    </el-row>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="单价"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="buyNum"
                                    label="数量"
                                    show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="3"><div class="grid-content ">
                                            <span style="font-size: 24px;margin-right: 5px" @click="scope.row.buyNum --">-</span>
                                        </div></el-col>
                                        <el-col :span="18"><div class="grid-content ">
                                            <el-input v-model="scope.row.buyNum"></el-input>
                                        </div></el-col>
                                        <el-col :span="3"><div class="grid-content ">
                                            <span style="font-size: 24px; padding-top: 20px;margin-left: 5px" @click="scope.row.buyNum ++">+</span>
                                        </div></el-col>
                                    </el-row>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="小计"
                                    show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{scope.row.buyNum * scope.row.price}} ￥
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    show-overflow-tooltip>

                                <el-tag type="danger">删除</el-tag>
                            </el-table-column>
                        </el-table>

                        <div style="height: 64px;margin-right: 64px">
                            <div style="float: right; margin: 20px 20px; height: 100px">
                                <span style="margin: 0px 20px">总计：{{totalAmountHandler}}</span>
                                <el-button type="danger" @click="settlementTwo">去结算</el-button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">

    var commoId = '[[${commodityId}]]';

    var ebookVue = new Vue({
        el : '#app',
        data : {
            carts : {},
            selCommoditys : []
        },
        created : function () {
            loadCart();
        },
        computed : {
            totalAmountHandler : function () {
                let totalAmount = 0;
                for (let i=0; i<this.selCommoditys.length; i++) {
                    let commodity = this.selCommoditys[i];
                    totalAmount += commodity.buyNum * commodity.price;
                }
                return totalAmount;
            }
        },
        methods : {
            settlementTwo : function() {
                let settlementInfos = [];

                for (let i=0; i<this.selCommoditys.length; i++) {
                    let selCommo = this.selCommoditys[i];

                   let cartInfo = {};
                    cartInfo.cartId = selCommo.cartId;
                    cartInfo.commodityId = selCommo.commoId;
                    cartInfo.buyNum = selCommo.buyNum;
                    settlementInfos.push(cartInfo);
                }

                alert(JSON.stringify(settlementInfos));

                $.ajax({
                    url : '/cart/settlementTwo',
                    type : 'POST',
                    contentType : 'application/json',
                    data : JSON.stringify(settlementInfos),
                    success : function (result) {
                        if (result.code != 1000) {
                            alert(result.message);
                            if (result.code == 5000) {
                                window.location.href = '/toLogin.do';
                            }
                            return;
                        }

                        alert('结算成功');
                        window.location.href = '/order/toSettlement';
                    }
                });
            },

            settlementOne : function() {
                let settlementInfo = '';

                for (let i=0; i<this.selCommoditys.length; i++) {
                    let selCommo = this.selCommoditys[i];
                    let cartInfo = selCommo.cartId + '-' + selCommo.commoId + '-' + selCommo.buyNum;
                    settlementInfo += cartInfo + '$'
                }

                alert(settlementInfo);
                dayuanit.ajax('/cart/settlementOne', {
                    settlementInfo : settlementInfo
                }, function (result) {
                    alert('结算成功');
                })
            },
            commoditySelectionChange : function(commoditys) {
                console.log(commoditys)
                this.selCommoditys = commoditys;
            },
            addCard : function () {
                dayuanit.ajax('/card/addCard', {
                    commoId : commoId,
                    buyNum : 1
                }, function (result) {
                    alert('添加成功');
                })
            }
        }
    });

    function loadCart() {
        dayuanit.ajax('/cart/loadCart', {
        }, function (result) {
            ebookVue.carts = result.data;
        })
    }

</script>

</body>
</html>
